<template>
  <div class="margin-box">
    <el-tabs class="message-list" v-model="activeName">
      <el-tab-pane class="tab-pane" name="first">
        <span slot="label">全部通知（{{messagesTotal.allNotice}}）</span>
        <messageTable ref="tab_first" messageType="1" @myUpdate="handleMessagesTotal" />
      </el-tab-pane>
      <el-tab-pane class="tab-pane" name="second">
        <span slot="label">未读通知（{{messagesTotal.unReadNotice}}）</span>
        <messageTable ref="tab_second" messageType="2" @myUpdate="handleMessagesTotal" />
      </el-tab-pane>
      <el-tab-pane class="tab-pane" name="third">
        <span slot="label">已读通知（{{messagesTotal.readNotice}}）</span>
        <messageTable ref="tab_third" messageType="3" @myUpdate="handleMessagesTotal" />
      </el-tab-pane>
      <el-tab-pane class="tab-pane" name="fourth">
        <span slot="label">我发起的通知（{{messagesTotal.mySendNotice}}）</span>
        <messageTable ref="tab_fourth" messageType="4" @myUpdate="handleMessagesTotal" />
      </el-tab-pane>
      <el-tab-pane class="tab-pane" name="fifth">
        <span slot="label">催办消息（{{messagesTotal.urgencynotice}}）</span>
        <messageTable ref="tab_fifth" messageType="5" @myUpdate="handleMessagesTotal" />
      </el-tab-pane>
    </el-tabs>
    <el-button type="primary" class="add-button" size="small" @click="handleAdd">新增</el-button>
    <v-dialog title="新增消息" :show.sync="dialogVisible" @beforeClose="beforeClose" width="1000px">
      <div class="message-box">
        <el-form ref="messageDetails" label-position="top" :model="messageAdd.sysInfo" class="form-wrap" size="small" :rules="rules">
          <el-form-item label="消息类型" prop="messageType">
            <el-select v-model="messageAdd.sysInfo.messageType" placeholder="请选择">
              <el-option v-for="item in messageTypes" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="选择接收人" class="chooseRecipient">
            <el-button type="primary" @click="xzlxr()">点击选择接收人</el-button>
            <p v-if="messageAdd.userIdList.length!=null && messageAdd.userIdList.length>0">{{"当前选择人数:"+messageAdd.userIdList.length}}</p>
            <div style="width: 950px;overflow: hidden">{{keys}}</div>
          </el-form-item>
          <el-form-item label="消息标题" prop="messageHeader">
            <el-input v-model.trim="messageAdd.sysInfo.messageHeader" maxlength="120" show-word-limit></el-input>
          </el-form-item>
          <el-form-item label="消息内容" prop="msgContent">
            <el-input type="textarea" v-model.trim="messageAdd.sysInfo.msgContent"></el-input>
          </el-form-item>
        </el-form>
        <SelectUsers ref="SelectUsers" v-on:CheckedKeys="Userload" />
      </div>
      <div slot="foot">
        <el-button @click="handleCancel" class="receiver">取 消</el-button>
        <el-button v-throttle="[handleCommit]" type="primary">提 交</el-button>
      </div>
    </v-dialog>
  </div>
</template>

<script src="./index"></script>

<style scoped lang="scss">
.margin-box {
  position: relative;
  .message-list {
    background-color: #ffffff;
    margin: 10px 0;
  }
  .tab-pane {
    margin: 10px 10px;
  }
  /deep/ .el-tabs__nav-scroll {
    padding-left: 20px;
    line-height: 60px;
  }
  .add-button {
    position: absolute;
    top: 25px;
    right: 10px;
  }
  /deep/ .el-textarea__inner {
    min-height: 120px !important;
    border: 1px solid #dcdfe6;
  }
}
.chooseRecipient {
  /deep/ .el-form-item__label {
    position: relative;
    padding-left: 10px;
    margin-right: 20px;
    &:before {
      content: "*";
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-60%);
      color: #f57272;
    }
  }
}
</style>
